//1.引入Vue
import Vue from 'vue';

//2.引入VueRouter
import VueRouter from 'vue-router';

//引入路由组件
import Login from '../pages/Login'
import Home from '../pages/Home'
import Music from '../pages/Home/Music'
import News from '../pages/Home/News'
import Games from '../pages/Home/Games'


//3.让Vue使用VueRouter这个插件
Vue.use(VueRouter)


//4.创建路由器对象
export default new VueRouter({
    //在实例化路由器对象的配置中,书写路由表配置
    routes: [{
            path: '/login',
            component: Login
        },
        {
            path: '/home',
            component: Home,
            // 在某个路由规则中如果有默认子路由,则在当前路由中不再书写name属性
            // name:'home',
            children: [{
                    // 在动态的params参数中,如果有可选的,请放在最后,并且添加一个?结尾
                    path: 'music/:id/:time?',
                    component: Music,
                    name: 'music',
                    //如果在路由的配置中书写了props配置项,则把当前路由表接收的praams动态参数通过props的形式传递给该组件
                    props:true
                },
                {
                    path: 'news',
                    component: News,
                    name: 'news'
                },
                {
                    path:'games',
                    component:Games,
                    name:'games',
                    //在路由表中如果props是一个配置对象,则会把对象内的属性一个个通过props传递给当前组件
                    /* props:{
                        a:1,
                        b:2,
                        c:3
                    } */
                    //props第三种写法,props可以是一个函数,函数的参数就是当前路由的$route路由对象
                    props:(route)=>{
                        // console.log(route,'mmm');
                        return route.query
                    }
                },
                // 二级路由重定向的方式1:redirect也适用于多级路由
                // {path:'',redirect:'/home/music'}
                // 二级路由重定向的方式2:默认子路由
                {path:'',component:News}
            ]
        },
        /* 
            通过路由规则的redirect属性,指定一个新的路由地址,可以很方便的设置路由的重定向
        */
        {path:'/',redirect:'/home'}
    ]
})